<template>
		<view class="content" :style="{height:wh+'px'}">
			<view class="first">
					<view class="tit1"><text class="tit">孕妈体验小情节</text></view>
					<image id="hyl" src="../../../static/mm.png" mode=""></image>
					<view v-for="(p,index) in plan.slice(pid,pid+1)" :key='index'>
						<view class="writer"><text>{{p.content}}</text></view>
						<view v-if="p.id==pid+1">
							<image class="hy" src="../../../static/hy.png" mode=""></image>
							<button class="btn1" @click="play(planAid,pid,p.id)"><text class="pist">{{p.planA}}</text></button>
							<button class="btn2" @click="play(planBid,pid,p.id)"><text class="pist">{{p.planB}}</text></button>
						</view>
					</view>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				wh:0,
				plan: [{
						id: 1,
						planA: '当然，我很愿意',
						planB: '虽然我自己也有很多问题，但是我愿意试试',
						content: '　　欢迎来到孕妈妈小情节体验！你现在是小漂亮，大美丽是你的好朋友，她和你一样，也孕育一条小生命。可是，大美丽这段时间遇到了很多问题，闷闷不乐的，你能帮她解决吗？',
					},
					{
						id: 2,
						planA: '不好意思哈，我也不清楚',
						planB: '这是正常现象，怀孕导致体内激素发生变化，会刺激胸部肿胀',
						content: '　　小漂亮，最近我胸口总是不舒服,一胀一胀的很难受，到底该不该上医院检查啊？',
					},
					{
						id: 3,
						planA: '我也有这种情况，要多喝水，多按摩',
						planB: '不要担心哦，宝宝满五个月后，你的心肺肝肾功能都逐渐进入“满负荷”运行阶段，小腿在傍晚时分出现轻微浮肿，这是正常的。',
						content: '　小漂亮，你小腿有没有浮肿的现象？我的脚踝、脚掌最明显了，好担心啊！',
					},
					{
						id: 4,
						planA: '可以准备些薄荷，吃清淡点。',
						planB: '你要是呕吐严重还是去医院看看吧，说不定是双胞胎，怀多胞胎孕吐会非常难受。',
						content: '　我闻到酸菜鱼会感觉胃不舒服，特别想吐，虽然孕吐很正常，但我还是害怕，好多好吃的都吃不了了，心里难受啊。',
					},
					{
						id: 5,
						planA: '月份大了才更应该到处走走，后面更利于生产',
						planB: '我家也是，他们都不让我动弹，我总觉得还是要走走才对，还是在家走走吧，锻炼锻炼下身体也好啊',
						content: '　我在家快憋不住了，想要出门，啊啊啊，但是他们总说我月份大了，怕我摔着，不让我出去',
					},
					{
						id: 6,
						planA: '孩子的意愿最重要',
						planB: '好呀，一言为定，我们要么互为干妈，要么互为亲家',
						content: '　　小漂亮，你看，这是我新买的小衣服，真不知道孩子是男是女，如果是两个男孩或者两个女孩就让他们结为兄弟姐妹，如果一龙一凤，咱们就结为亲家好不好？',
					},
					{
						id: 7,
						planA: '你和宝宝一定会平平安安地出来的！',
						planB: '稳住，虽然我也很慌，但是，我相信我的家人们，包括我的宝宝，一定不会让我受罪的。',
						content: '　　我好担心，宝宝这两天胎动得厉害，眼看着预产期也要到了，我又焦虑又期许，要是...要是有意外怎么办...千万要顺产啊，希望是一个健康的小宝贝',
					},
					{
						id:8,
						planA: '进入下一阶段——向着宝妈进发！',
						planB: '好好休息一下，和家人共度美好时光',
						content: '　　恭喜你们度过了艰辛的怀孕阶段，每一位母亲都很伟大，你们坚持过来了，有一个可爱健康宝宝就是你们最大的回报！妈妈们，你们辛苦了！o(*￣▽￣*)ブ',
					}
				],
				pid: 0,
				planAid: 0,
				planBid: 1,
				name: '微信名称',
			}
		},

		methods: {
			play(id, pid, p) {
				//第一个情节
				if (p == 1) {
					this.pid = p; //进入第一个情节
				}
				//第一个情节
				if (p == 2) {
					if (id == 0) {
						this.pid = p + 1; //进入第二个情节
					} else if (id == 1) {
						this.pid = p; //进入小助手答疑
					}
				}
				if (p == 3) {
					this.pid = p;
				}
				if (p == 4) {
					if (id == 0) {
						this.pid = p + 1;
					} else if (id == 1) {
						this.pid = p;
					}
				}
				if (p == 5) {
					this.pid = p;
				}
				if (p == 6) {
					this.pid = p;
				}
				if (p == 7) {
					this.pid = p;
				}
				if (p == 8) {
					if (id == 0) {
						uni.redirectTo({
							url: "../games_two/games_two"
						})
					} else if (id == 1) {
						uni.navigateBack({
							delta: 1
						})
					}
				}

			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight
		}
	}
</script>

<style>
	.content {
		height: 670px;
		/* background: rgba(255,192,203,0.1); */
		background-color: red;
		background: url('http://r.photo.store.qq.com/psc?/V10oAX800ltCLc/ruAMsa53pVQWN7FLK88i5lKToN3C*0YbBBm1Jg3rds8v1q0b312NtN4XILwWdKDSjjT9F6O8ptPQ.EVZxdM6ZH7HANXH7qVSFYztuNX5Ooc!/r');
		background-size: 100% 100%;
	}
	#hyl{
		position: relative;
		left: 290px;
		width: 80px;
		height: 80px;
	}
	.first{
		position: relative;
		left: 20px;
		top: 20px;
		width:90%;
		height:400px;
		/* border:2px dashed rgba(255,255,255,1); */
		/* border-bottom: none; */
		border-radius: 5px;
	}
	.tit1{
		position: relative;
		top: -20px;
		left: 80px;
		width: 200px;
		height: 40px;
		border-radius:10px;
		border: 1px solid 	#CDB5CD;
		background-color:rgba(255,255,255,1);
	}
	.tit {
		position: relative;
		top: -15px;
		text-align: center;
		color:black;
		font-size: 18px;
		width: 100%;
		display: block;
		padding-top: 20px;
		/* color: #545454; */
	}

	.writer {
		margin-left: 10%;
		padding: 8px;
		width: 80%;
		background-color: rgba(255,255,255,0.9);
		line-height: 34px;
		border-radius: 5%;
		font-size: 28rpx;
		letter-spacing: 1px;
		border: 1px solid 	#CDB5CD;

	}
	.btn1{
		position: absolute;
		left:50px ;
		top:420px;
		border-radius: 20px;
		line-height: 40px;
		border:1px solid white ;
		letter-spacing: 1px;
		border: 1px solid 	#CDB5CD;
		/* color: #545454; */
		background-color: rgba(255,255,255,0.8);
	}
	.btn2{
		position: absolute;
		top:520px;
		left: 50px;
		border-radius: 20px;
		line-height: 40px;
		border:1px solid white ;
		letter-spacing: 1px;
	    border: 1px solid 		#CDB5CD;
		/* color: #545454; */
		background-color: rgba(255, 255, 255,0.8);
	}
	.hy{
		position: absolute;
		top: 340px;
		width: 80px;
		height: 80px;
		}
	.pist{
		font-size: 15px;
		/* color: #545454; */
	}
</style>
